<template>
  <el-dialog
    title="发布媒体报道"
    :visible.sync="mediaReportsDialogData.isShow"
    width="35%"
  >
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="formData"
        label-width="120px"
      >
        <el-form-item label="报道预览图:" prop="imgInfo">
          <uploadSingImg
            :imgUrl="formData.imgInfo"
            accept=".jpg,.jpeg,.png,.gif"
            :maxSize="5"
            @getImgUrl="getPreview"
          >
            <template v-slot:imgInfo>( 图片大小不超过5M )</template>
          </uploadSingImg>
        </el-form-item>
        <el-form-item label="标题:" prop="title">
          <el-input
            v-model.trim="formData.title"
            type="text"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="作者头像:" prop="avatar">
          <uploadSingImg
            :imgUrl="formData.avatar"
            accept=".jpg,.jpeg,.png,.gif"
            :maxSize="5"
            @getImgUrl="getAvatar"
          >
            <template v-slot:imgInfo>( 图片大小不超过5M )</template>
          </uploadSingImg>
        </el-form-item>
        <el-form-item label="作者名字:" prop="nickname">
          <el-input
            v-model.trim="formData.nickname"
            type="text"
            maxlength="10"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="发布时间:" prop="publishTime">
          <el-date-picker
            v-model="formData.publishTime"
            type="date"
            placeholder="选择日期"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="文章链接:" prop="link">
          <el-input
            v-model.trim="formData.link"
            type="text"
            maxlength="500"
          ></el-input>
        </el-form-item>
        <el-form-item label="排列序号:" prop="sort">
          <el-input
            v-model.trim="formData.sort"
            type="text"
            maxlength="9"
            @input="validateSort"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="clearFormData">取 消</el-button>
      <el-button type="success" @click="confirm('ruleForm')">提 交</el-button>
    </span>
  </el-dialog>
</template>
<script>
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
import {
  addArticle,
  articleDetail,
  editArticle
} from '@/api/brandManage/aboutUs'
export default {
  props: ['mediaReportsDialogData'],
  data() {
    return {
      formData: {
        imgInfo: '',
        title: '',
        avatar: '',
        nickname: '',
        publishTime: '',
        link: '',
        sort: '',
        modular: 'MEDIA',
        source: ''
      },
      isReadOnly: false,
      rules: {
        imgInfo: [
          { required: true, message: '报道预览图不能为空', trigger: 'change' }
        ],
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        avatar: [
          { required: true, message: '作者头像不能为空', trigger: 'change' }
        ],
        nickname: [
          { required: true, message: '作者名字不能为空', trigger: 'blur' }
        ],
        publishTime: [
          { required: true, message: '发布时间不能为空', trigger: 'change' }
        ],
        link: [
          {
            required: true,
            pattern:
              '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]',
            message: '请输入正确的文章链接',
            trigger: 'blur'
          }
        ],
        sort: [{ required: true, message: '排列序号不能为空', trigger: 'blur' }]
      }
    }
  },
  components: {
    uploadSingImg
  },
  mounted() {
    const { id } = this.mediaReportsDialogData
    if (id) {
      articleDetail({ id }, (res) => {
        res.publishTime = Date.parse(new Date(res.publishTime))
        this.formData = res
      })
    }
  },
  methods: {
    /* 报道预览图 */
    getPreview(url) {
      this.formData.imgInfo = url
      this.$refs.ruleForm.validateField('imgInfo')
    },
    /* 作者头像 */
    getAvatar(url) {
      this.formData.avatar = url
      this.$refs.ruleForm.validateField('avatar')
    },
    /* 排序只能输入数字 */
    validateSort(val) {
      this.formData.sort = val.replace(/[^\d]/g, '')
    },
    /* 确认提交 */
    confirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { id } = this.mediaReportsDialogData
          if (id) {
            editArticle(id, this.formData, (res) => {
              this.$emit('refresh')
              this.clearFormData()
            })
          } else {
            const { source } = this.mediaReportsDialogData
            this.formData.source = source
            addArticle(this.formData, (res) => {
              this.$emit('refresh')
              this.clearFormData()
            })
          }
        }
      })
    },
    /* 关闭时清空 */
    clearFormData() {
      Object.assign(this.$data.formData, this.$options.data().formData)
      this.mediaReportsDialogData.isShow = false
    }
  }
}
</script>
<style lang="less" scoped></style>
